import React, { useState } from 'react';
import { Form, Row, Col, Input, Button, Select, Radio } from 'antd';

export default function PrepaymentForm(props) {

    const [form] = Form.useForm();


    const onFinish = (values) => {
        console.log('Received values of form: ', values);
    };

    return (
        <div className='prepayment-form' style={{
            marginTop: 40,
            border: "1px solid #ccc",
            backgroundColor: '#fff',
            padding: 30
        }}>
            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}
            >
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            initialValue={1}
                            name="prepayment_method"
                            label="提前还款方式"
                        >
                            <Select disabled={props.state === 1}>
                                <Select.Option value={1}>
                                    全部提前还清
                                </Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            initialValue={3}
                            name="prepayment_periods"
                            label="期数"
                        >
                            <Input disabled={props.state === 1}></Input>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            initialValue={(300000 / 100).toFixed(2) + " 元"}
                            name="prepayment_allmoney"
                            label="提前还款总额"
                        >
                            <Input disabled={props.state === 1}></Input>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            initialValue={(0 / 100).toFixed(2) + " 元"}
                            name="prepayment_money"
                            label="提前还款费"
                        >
                            <Input disabled={props.state === 1}></Input>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            initialValue={"2018-01-14"}
                            name="real_date"
                            label="实际还款日期"
                        >
                            <Input disabled={props.state === 1}></Input>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            initialValue={1}
                            name="isChargeInterest"
                            label="是否收取剩余利息"
                        >
                            <Radio.Group disabled={props.state === 1}>
                                <Radio value={0}>否</Radio>
                                <Radio value={1}>是</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            initialValue={(15200 / 100).toFixed(2) + " 元"}
                            name="charge_money"
                            label="收取金额"
                        >
                            <Input disabled={props.state === 1}></Input>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Form.Item
                            label="备注"
                        >
                            <textarea cols="100" rows="3" disabled={props.state === 1} defaultValue={"客户已于14号提前还款"}></textarea>
                        </Form.Item>
                    </Col>
                </Row>
                {props.state === 4 && <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            name="pre_audit"
                            label="审核"
                        >
                            <Radio.Group>
                                <Radio value={1}>已还款</Radio>
                                <Radio value={2}>驳回</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>}
                {props.state === 4 && <Row gutter={24}>
                    <Col>
                        <Form.Item
                            label="备注"
                        >
                            <textarea cols="100" rows="3"></textarea>
                        </Form.Item>
                    </Col>
                </Row>}
                {(props.state === 2 || props.state === 4) &&
                    <Row gutter={24}>
                        <Col
                            span={14}
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                提交确认
                            </Button>
                            <Button
                                style={{
                                    margin: '0 80px',
                                }}
                                onClick={() => {
                                    props.goBack && typeof props.goBack === 'function' && props.goBack()
                                }}
                            >
                                返回
                            </Button>
                        </Col>
                    </Row>}
            </Form>
        </div>
    )
}



